<template>
    <el-card shadow="never" class="card-el">
        <div class="title-pending">
            <div class="long-string"></div>
            <span>签约记录 签约详情</span>
        </div>

        <div class="divider"></div>
        <img class="img-title" src="../../../assets/Snipaste_2025-07-19_11-04-21.png" alt="">
        <div class="content-title">
            <span class="title-word">居民信息</span>

            <el-form v-if="onependingData.residentId" :model="formItem" style="margin-top: 30px;">

                <el-row style="white-space: nowrap;">
                    <el-form-item label=" 姓名">
                        <span style="width: 200px;">{{ onependingData.residentId.name }}</span>
                    </el-form-item>

                    <el-form-item label="身份证号">
                        <span style="width: 200px;">{{ onependingData.residentId.IDnumber }}</span>
                    </el-form-item>

                    <el-form-item label="性别">
                        <span style="width: 100px;">{{ onependingData.residentId.gender ? '男' : '女' }}</span>
                    </el-form-item>

                    <el-form-item label="年龄">
                        <span style="width: 100px;"> {{ onependingData.residentId?.age || '' }}</span>
                    </el-form-item>
                </el-row>

                <el-row>
                    <el-form-item label="联系电话">
                        <span style="width: 200px;">{{ onependingData.residentId.phone }}</span>
                    </el-form-item>

                    <el-form-item label="现居地">
                        <span style="width: 200px;">{{ onependingData.residentId?.address || '' }}</span>
                    </el-form-item>

                    <el-form-item label="居民标签">
                        <el-tag type="primary" style="margin-right: 10px;">高血压</el-tag>
                        <el-tag type="success">冠心病</el-tag>
                    </el-form-item>

                </el-row>

                <div class="content-item" style="display: flex;">
                    <span class="span-item">家庭成员</span>
                    <el-row class="row-el">

                        <div class="message-item">
                            <el-avatar :icon="UserFilled" style="width: 40px; height: 40px; margin-top: 6px;" />
                            <div class="item-row">
                                <p>
                                    <span style="font-size:16px;font-weight: 400;">李清</span>
                                    <span style="font-size:12px;color:#999999; margin-left: 5px;">58岁</span>
                                </p>
                                <p>
                                    <span style="font-size: 12px; color: #999999;">关系:父母</span>
                                </p>
                            </div>
                            <img src="../../../assets/n.png" alt="" style="width: 15px; height: 15px; margin-top: 8px;">
                        </div>


                        <div class="message-item">
                            <el-avatar :icon="UserFilled" style="width: 40px; height: 40px; margin-top: 6px;" />
                            <div class="item-row">
                                <p>
                                    <span style="font-size:16px;font-weight: 400;">王林</span>
                                    <span style="font-size:12px;color:#999999; margin-left: 5px;">28岁</span>
                                </p>
                                <p>
                                    <span style="font-size: 12px; color: #999999;">关系:夫妻</span>
                                </p>
                            </div>
                            <img src="../../../assets/n.png" alt="" style="width: 15px; height: 15px; margin-top: 8px;">
                        </div>


                        <el-button link plain @click="dialogFormVisible = true" type="primary">+关联家庭成员</el-button>

                        <el-dialog class="dialog-el" v-model="dialogFormVisible" title="关联家庭成员" width="360px">
                            <el-form :model="form" class="dialog-form">

                                <el-form-item label="选择成员">
                                    <el-select v-model="form.member" placeholder="请选择" filterable>
                                        <el-option label="王皓" value="王皓" />
                                        <el-option label="胡曼" value="胡曼" />
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="选择关系">
                                    <el-select v-model="form.relation" placeholder="请选择">
                                        <el-option label="父母" value="父母" />
                                        <el-option label="配偶" value="配偶" />
                                    </el-select>
                                </el-form-item>
                            </el-form>
                            <template #footer>
                                <div class="dialog-footer">
                                    <el-button @click="dialogFormVisible = false">取消</el-button>
                                    <el-button type="primary" @click="dialogFormVisible = false">
                                        确定
                                    </el-button>
                                </div>
                            </template>
                        </el-dialog>
                    </el-row>
                </div>
            </el-form>


            <div class="divider"></div>

            <div class="content-title">
                <span class="title-word">签约信息</span>
                <el-form style="margin-top: 30px;" v-if="onependingData.residentId">

                    <el-row>
                        <el-form-item label="签约编号">
                            <span style="width: 200px;">{{ onependingData.organizationId?._id || '' }}</span>
                        </el-form-item>

                        <el-form-item label="签约状态">
                            <span style="width: 200px;" :style="{ color: getStateColor(onependingData?.state || '') }">
                                {{ getStateText(onependingData?.state) }}</span>
                        </el-form-item>

                        <el-form-item label="签约机构">
                            <span style="width: 200px;">{{ onependingData.organizationId?.name || '' }}</span>
                        </el-form-item>

                        <el-form-item label="签约团队">
                            <span style="width: 200px;">{{ onependingData.teamId?.name || '' }}</span>
                        </el-form-item>
                    </el-row>



                    <el-row>
                        <el-form-item label="签约医生">
                            <span style="width: 200px;">{{ onependingData.doctorId?.name || '' }}</span>
                        </el-form-item>

                        <el-form-item label="服务包">
                            <span style="width: 200px;">{{ onependingData.servicePackId?.type || '' }}</span>
                        </el-form-item>

                        <el-form-item label="签约周期">
                            <span style="width: 200px;">{{ onependingData.servicePackId?.period || '' }}</span>
                        </el-form-item>

                        <el-form-item label="费用">
                            <span style="width: 200px;">{{ onependingData.serviceItemIds?.type || '' }}</span>
                        </el-form-item>
                    </el-row>


                    <el-row>
                        <el-form-item label="签约类型">
                            <span style="width: 200px;">{{ onependingData?.type || '' }}</span>
                        </el-form-item>

                        <el-form-item label="申请时间">
                            <span style="width: 200px;">{{ onependingData?.effectiveDate || '' }}</span>
                        </el-form-item>

                        <el-form-item label="生效时间">
                            <span style="width: 200px;">2020/10/09</span>
                        </el-form-item>

                    </el-row>


                    <el-row>
                        <el-form-item label="备注信息">
                            <span style="width: 200px;">{{ onependingData?.servicePackId.intro || '' }}</span>
                        </el-form-item>
                    </el-row>

                </el-form>

                <div class="divider"></div>

                <div class="button-item">
                    <el-button @click="$router.push('/admin/CoManagement/Redactdetails')" type="primary">续约</el-button>
                    <el-button @click="$router.push('/sign/record')">返回</el-button>
                </div>

            </div>
        </div>
    </el-card>

</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { findSignApi } from '../../../api/pending';
import { UserFilled } from '@element-plus/icons-vue';



const dialogFormVisible = ref(false)
//接收路由传参
import { useRoute } from 'vue-router'
const route = useRoute()

const form = reactive({
    member: '', relation: ''
})

onMounted(() => {
    onepending()
})

//保存一个完整的签约数据
const onependingData = ref({})

async function onepending() {
    const _id = route.query._id;
    const res = await findSignApi({
        _id
    });
    if (res.code == 200) {
        onependingData.value = res.data;
        console.log(onependingData.value);
    }
}

///根据状态值返回对应的颜色
const getStateColor = (state) => {
    switch (state) {
        case 0: return '#F5222D'; // 已驳回（红色）
        case 1: return '#1890FF'; // 待审核（蓝色）
        case 2: return '#FAAD14'; // 待支付（橙色）
        case 3: return '#52C41A'; // 已签约（绿色）
        case 4: return '#8C8C8C'; // 待续约（灰色）
        default: return '#333333'; // 默认颜色（深灰色）
    }
}

//根据状态值返回文字
const getStateText = (state) => {
    const stateMap = {
        0: '已驳回',
        1: '已提交',
        2: '已通过',
        3: '生效中',
        4: '已到期'
    };
    return stateMap[state] || '未知状态'
}
</script>

<style scoped>
.card-el {
    position: relative;
}

.img-title {
    position: absolute;
    left: 157px;
    top: 46px;
}

.span-item {
    font-size: 13px;
    color: #999;
    width: 77px;
    height: 32px;
    padding-right: 12px;
    text-align: center;
}


:deep(.el-select__wrapper) {
    width: 200px;
    height: 40px;
}

.row-item {
    display: flex;
    align-items: center;
}

.el-form-item {
    display: flex;
    align-items: center;
    margin-right: 80px;
    margin-bottom: 30px;
}

:deep(.el-form-item__label) {
    font-size: 13px;
    color: #999999;
    width: 77px;
    height: 32px;
}


.title-pending {
    display: flex;
    align-items: center;
}

.long-string {
    width: 6px;
    height: 20px;
    background-color: rgba(41, 132, 248, 1);
    border-radius: 8px;
}

.title-pending>span {
    font-weight: 500;
    font-size: 18px;
    color: rgba(51, 51, 51, 0.898039215686275);
    margin-left: 10px;
}

.divider {
    width: 100%;
    height: 1px;
    background-color: rgba(185, 186, 180, 0.849);
    margin-top: 30px;
}

.content-title {
    margin-top: 30px;
}

.title-word {
    font-weight: 500;
    font-size: 16px;
    margin-top: 30px;
}

.message-item {
    width: 200px;
    height: 84px;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(242, 242, 242, 1);
    border-radius: 8px;
    padding: 15px;
    margin-right: 15px;
    display: flex;
    justify-content: space-between;

}

.item-row {
    display: flex;
    flex-direction: column;
}

.item-row>p {
    margin-top: 4px;
    margin-bottom: 4px;
}



.el-row {
    flex-wrap: nowrap;
}

.row-el {
    display: flex;
    align-items: center;
}

.button-item {
    display: flex;
    align-items: center;
    margin-top: 30px;
}
</style>